<template>
   <transition name="slide">
   	<div class="user-center">
   		<i class="iconfont icon-back back yellow" @click='back'></i>
   		<div class="switches-wrapper">
   			<switches @switch="switchItem" :currentIndex='currentIndex' :switches='switches'>
        </switches>
   		</div>

   	<div class="play-btn" ref="playBtn hui" @click="random">
   		<i class="iconfont icon-toplay"></i>
   		<span class="l">随机播放全部</span>
   	</div>
   	<div class="list-wrapper" ref="userWrapper">
      <scroll  ref='favoriteList' class="list-scroll" v-if="currentIndex===0" :data="playHistory">
            <div class="list-inner">
              <song-list :songs='favoriteList' @select='selectSong'></song-list>
            </div>
          </scroll>
          <scroll  ref='playHistory' class='search-history list-scroll' v-if="currentIndex===1" :data="playHistory">
            <div class="list-search">
            <song-list :songs='playHistory' @select='selectSong'></song-list>
            </div>
          </scroll>
    </div>
   	</div>
   </transition>
</template>

<script type="text/ecmascript-6">
import switches from 'base/switch/switches';
import scroll from 'base/scroll/scroll';
import songList from 'base/songlist/songlist'
import {mapGetters,mapActions} from 'vuex';
import Song from 'common/js/song';
import {playlistMixin} from 'common/js/mixin'
export default{
  name:'',
  mixins:[playlistMixin],
  data(){
   return{
   	currentIndex:0,
   	switches:[{name:'我喜欢的'},{name:'最近听的'}]
  }
},
computed:{
...mapGetters(['favoriteList','playHistory'])
},
methods:{
  handlePlaylist(playlist){
      const bottom=playlist.length>0?'60px':'';
      this.$refs.userWrapper.style.bottom=bottom;
      this.$refs.favoriteList&&this.$refs.favoriteList.refresh();
      this.$refs.playHistory&&this.$refs.playHistory.refresh()
    },
switchItem(index){
	this.currentIndex=index
},
selectSong(song){
this.insertSong(new Song(song))
},
back(){
this.$router.back()
},
random(){
let list=this.currentIndex===0?this.favoriteList:this.playHistory;
list=list.map((song)=>{
  return new Song(song)
})
this.randomPlay({list})
},
...mapActions(['insertSong','randomPlay'])
},

  components:{switches,songList,scroll}
}
</script>

<style rel="stylesheet" lang="less">
   .user-center{
   	 position: fixed;
    top: 0;
    bottom: 0;
    z-index: 4;
    width: 100%;
    background-color: #222;
    &.slide-enter-active, &.slide-leave-active{
      transition: all 0.3s
    }
    &.slide-enter, &.slide-leave-to{
      transform: translate3d(100%, 0, 0)
    }
    .back{
    	position: absolute;
    	top: 0;
    	left: 0;
    	padding: 8px;
    	font-size: 26px;
    }
    .switches-wrapper{
      margin: 10px 0 30px 0;
    }
    .play-btn{
        box-sizing: border-box;
    width: 135px;
    padding: 7px 0;
    margin: 0 auto;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.5);
    color: rgba(255,255,255,0.5);
    border-radius: 100px;
    font-size: 0;
    }
    .list-wrapper{
    position: absolute;
    top: 110px;
    bottom: 0;
    width: 100%;
    }
    .list-scroll{
      height: 100%;
      overflow: hidden;
    }
   }
</style>
